import {StackNavigator, createBottomTabNavigator} from 'react-navigation';
import WelcomePage from "../page/WelcomePage";
import FavoritePage from "../page/FavoritePage";
import PopularPage from "../page/PopularPage";
import TrendingPage from "../page/TrendingPage";
import MyPage from "../page/MyPage";
import React, {Component} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';

function _renderTab(tintColor, renderIcon) {
    return <Image style={[styles.tabBarIcon, {tintColor: tintColor}]}
                  source={renderIcon}/>;
}

export const AppTabNavigator = createBottomTabNavigator({
    Popular: PopularPage,
    Trending: TrendingPage,
    Favorite: FavoritePage,
    My: MyPage,
}, {
    initialRouteName: 'Popular',
    backBehavior: 'none',
    tabBarOptions: {
        activeTintColor: '#2196F3',
        labelStyle: {
            fontSize: 12,
        }
    },
    navigationOptions: ({navigation}) => ({
        tabBarIcon: ({focused, tintColor}) => {
            const {routeName} = navigation.state;
            if (routeName === 'Popular') {
                return <Image style={[styles.tabBarIcon, {tintColor: tintColor}]}
                              source={require('../../res/images/ic_polular.png')}/>
            } else if (routeName === 'Trending') {
                return <Image style={[styles.tabBarIcon, {tintColor: tintColor}]}
                              source={require('../../res/images/ic_trending.png')}/>
            } else if (routeName === 'Favorite') {
                return <Image style={[styles.tabBarIcon, {tintColor: tintColor}]}
                              source={require('../../res/images/ic_favorite.png')}/>
            } else if (routeName === 'My') {
                return <Image style={[styles.tabBarIcon, {tintColor: tintColor}]}
                              source={require('../../res/images/ic_my.png')}/>
            }
        }
    })
});
export const AppStackNavigator = StackNavigator({
        Home: {
            screen: AppTabNavigator,
            navigationOptions: {
                header: null
            }
        },
        Welcome: WelcomePage,
    }, {
        initialRouteName: 'Welcome'
    }
);


const styles = StyleSheet.create({
    container: {
        flex: 1,
        // backgroundColor:'#fff',
    },
    tabBarIcon: {
        width: 26, height: 26,
        resizeMode: 'contain',
    },
    tabBarSelectedIcon: {
        width: 26, height: 26,
        resizeMode: 'contain',
        // tintColor:'#4caf50'
    }
});